<template>
  <scroll-view class="scrool" :scroll-y="true" :style="{ height: '1490rpx' }">
    <view class="index-page">
      <u-navbar
        v-if="state.type === '0'"
        title="藏品详情"
        back-icon-color="#fff"
        :background="{ background: '#111723' }"
        title-color="#fff"
        :title-bold="true"
        :border-bottom="false"
      ></u-navbar>
      <u-navbar
        v-if="state.type === '1'"
        title="盲盒详情"
        back-icon-color="#fff"
        :background="{ background: '#111723' }"
        title-color="#fff"
        :title-bold="true"
        :border-bottom="false"
      ></u-navbar>
      <u-navbar
        v-if="state.type === '2'"
        title="藏品详情"
        back-icon-color="#fff"
        :background="{ background: '#111723' }"
        title-color="#fff"
        :title-bold="true"
        :border-bottom="false"
      ></u-navbar>
      <view class="qy-1">
        <view class="qy-2 threed-box moving" :style="state.st">
          <view class="xuanzhuan1 threed-side con1">
            <image
              :src="state.detailData.image"
              mode=""
              class="cover-image"
            ></image>
            <image
              src="@/static/images/miaobian.png"
              class="kuang-image"
            ></image>
          </view>
          <view class="threed-side con2">
            <image src="@/static/images/xuanzhuan.png" class="bg-image"></image>
            <image
              src="@/static/images/miaobian.png"
              class="kuang-image"
            ></image>
          </view>
          <view class="threed-side con3"></view>
          <view class="threed-side con4"></view>
          <view class="threed-side con5"></view>
          <view class="threed-side con6"></view>
          <view class="threed-side con7"></view>
          <view class="threed-side con8"></view>
        </view>
        <!-- <view class="qy-2">
          <image :src="state.detailData.image" mode=""></image>
        </view> -->
        <view class="qy-3"
          ><image src="@/static/images/taizi.png" mode=""></image
        ></view>
        <view class="qt-1">
          <view
            v-if="state.type === '0'"
            style="
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            "
          >
            {{ state.detailData.name }}
          </view>
          <view
            v-if="state.type === '1'"
            style="
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            "
          >
            {{ state.detailData.name }}
          </view>
          <view
            v-if="state.type === '2'"
            style="
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            "
          >
            #{{ state.detailData.collection_no }}_{{ state.detailData.name }}
          </view>
          <view
            class="arrow-right"
            @click="state.isPopupShow = true"
            v-if="state.type === '0'"
          >
            全部编号
            <u-icon name="arrow-right"></u-icon>
          </view>
        </view>
        <view class="qy-4">
          <view class="qy-5"
            ><image src="@/static/images/xingfl.png" mode=""></image
          ></view>
          <view class="tip">
            <view class="tip-l">星艺藏品</view>
            <view class="tip-r">
              <view class="tip-r-l">发行</view>
              <view class="tip-r-r"
                >{{
                  state.detailData.all_num || state.detailData.total_num
                }}份</view
              >
            </view>
          </view>
          <view class="qy-8"
            ><image src="@/static/images/xingfr.png" mode=""></image
          ></view>
        </view>
      </view>
      <view class="info" v-if="state.type === '0' || state.type == '2'">
        <view class="left">
          <u-avatar :src="state.detailData.author_avatar"></u-avatar>
          <view>{{ state.detailData.author_name }}</view>
        </view>
        <view class="button"
          ><u-button
            :ripple="true"
            size="medium "
            shape="circle"
            :custom-style="state.customStyle"
            @click="seeAuthor()"
            >看主页</u-button
          ></view
        >
      </view>
      <view class="info-number" v-if="state.type === '0' || state.type === '2'">
        <view class="content">
          <view class="block">
            <view class="top">铸造平台</view>
            <view class="bottom">星艺文化</view>
          </view>
          <view class="block">
            <view class="top">区块链</view>
            <view class="bottom">BSN文昌链</view>
          </view>
        </view>
        <view class="content-b">
          <view class="block">
            <view class="top">发行凭证</view>
            <view class="bottom">
              <view class="text">{{
                state.detailData.tx_hash
                  ? state.detailData.tx_hash
                  : '未设置发行凭证'
              }}</view>
              <image
                style="width: 80rpx"
                v-if="state.detailData.tx_hash"
                @click="copyText(state.detailData.tx_hash)"
                src="@/static/images/fuzhi.png"
                mode=""
              ></image>
            </view>
          </view>
        </view>
      </view>
      <view v-if="state.type == '0' || state.type == '1'">
        <view class="qy-14">
          <view class="qy-24">
            <view class="qy-23">
              <view class="qy-15" v-if="state.type == '0'">
                <view class="qy-16">故事背景</view>
                <view class="qy-17"
                  ><image src="../../static/images/qybj.png" mode=""></image
                ></view>
              </view>
              <view class="qy-19" v-if="state.type == '0'">
                <view
                  class="qy-21"
                  style="
                    text-indent: 56rpx;
                    color: #fff;
                    font-size: 28upx;
                    line-height: 50upx;
                    background-color: #111723;
                  "
                >
                  <rich-text :nodes="state.detailData.story"></rich-text>
                </view>
              </view>
            </view>

            <view class="qy-23" v-if="state.type == '0'">
              <view class="qy-15">
                <view class="qy-16">藏品介绍</view>
                <view class="qy-17"
                  ><image src="../../static/images/qybj.png" mode=""></image
                ></view>
              </view>
              <view class="qy-19">
                <view
                  class="qy-21"
                  style="
                    text-indent: 56rpx;
                    color: #fff;
                    font-size: 28upx;
                    line-height: 50upx;
                    background-color: #111723;
                  "
                >
                  <rich-text :nodes="state.detailData.introduce"></rich-text>
                </view>
              </view>
            </view>
            <view class="qy-23" v-if="state.type == '0'">
              <view class="qy-15">
                <view class="qy-16">设计理念</view>
                <view class="qy-17"
                  ><image src="../../static/images/qybj.png" mode=""></image
                ></view>
              </view>
              <view class="qy-19">
                <view
                  class="qy-21"
                  style="
                    text-indent: 56rpx;
                    color: #fff;
                    font-size: 28upx;
                    line-height: 50upx;
                    background-color: #111723;
                  "
                >
                  <rich-text
                    :nodes="state.detailData.design_concept"
                  ></rich-text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view
        v-if="state.type === '1'"
        class="qy-21"
        style="
          text-indent: 56rpx;
          color: #fff;
          font-size: 28upx;
          line-height: 50upx;
          padding: 30px;
        "
      >
        <rich-text :nodes="state.detailData.content"></rich-text>
      </view>
    </view>
  </scroll-view>

  <view class="b-button">
    <view class="price">¥{{ state.detailData.price }}</view>
    <view v-show="state.detailData.status">
      <u-button
        :ripple="true"
        size="medium "
        shape="circle"
        disabled="true"
        v-if="state.detailData.status != 2 && !state.detailData.sale_status"
        :custom-style="state.disableStyle"
        @click="payment"
      >
        {{ state.detailData.status == 1 ? '未开始' : '已售罄' }}
      </u-button>
      <u-button
        :ripple="true"
        size="medium "
        shape="circle"
        v-if="state.detailData.status == 2 && state.detailData.sale_status != 2"
        :custom-style="state.customStyle"
        @click="payment"
      >
        抢购
      </u-button>
      <u-button
        :ripple="true"
        size="medium "
        shape="circle"
        disabled="true"
        v-if="
          state.detailData.sale_status == 1 || state.detailData.lock_status == 1
        "
        :custom-style="state.disableStyle"
        @click="payment"
      >
        锁单中
      </u-button>
      <u-button
        :ripple="true"
        size="medium "
        shape="circle"
        v-if="
          state.detailData.sale_status == 2 && state.detailData.lock_status == 0
        "
        :custom-style="state.customStyle"
        @click="payment"
      >
        立即购买
      </u-button>
    </view>
  </view>
  <u-popup v-model="state.isPopupShow" mode="bottom" closeable>
    <view class="popup-contrnt">
      <view style="font-size: 45rpx">藏品列表</view>
      <view class="checked">
        <u-checkbox
          v-model="state.checked"
          :disabled="false"
          shape="circle"
          label-size="26"
          active-color="black"
          @change="checkChange"
          >仅看寄售商品</u-checkbox
        >
        <u-subsection
          height="50"
          font-size="26"
          :bold="false"
          :list="[
            {
              name: '按编号排序'
            },
            {
              name: '按价格排序'
            }
          ]"
          :current="state.curNow"
          @change="sectionChange"
        ></u-subsection>
      </view>
      <scroll-view
        style="height: 1000rpx"
        :scroll-y="true"
        lower-threshold="30"
        @scrolltolower="bottomOut()"
      >
        <view
          class="block"
          v-for="(item, index) in state.list"
          :key="index"
          @click="routerPush(item)"
        >
          <view class="left">
            <text>#{{ item.collection_no }}/{{ item.total }}</text>
            <view class="tip">{{ item.sale_status_text }}</view>
          </view>

          <view>
            ¥ {{ item.price }}
            <u-icon name="arrow-right" color="#909399"></u-icon>
          </view>
        </view>
        <u-loadmore
          :status="state.status"
          icon-type="flower"
          margin-top="30"
          margin-bottom="30"
        />
      </scroll-view>
    </view>
  </u-popup>
  <u-modal
    v-model="state.show"
    @confirm="confirm"
    content="请先进行实名认证"
    show-cancel-button
  ></u-modal>
</template>
<script setup lang="ts">
import {
  getCollectionDetail,
  getOneCollectionAllNumbers,
  snapUpCollection,
  snapUpBox,
  getBoxDetail,
  getNumberDetail,
  generateOrder
} from '@/api/modules/homePage'
import { reactive, onMounted, watch } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { default as useUserStore } from '@/store/modules/userInfo'
import { storeToRefs } from 'pinia'
const store = useUserStore()
const { userInfo } = storeToRefs(store)

const state = reactive({
  show: false,
  st: '',
  type: '', //区分藏品0盲盒1寄售2
  id: '', ///藏品id
  customStyle: {
    backgroundImage: 'linear-gradient(to right, #7e50d7, #2138cd)',
    color: '#fff'
  },
  disableStyle: {
    backgroundImage: 'linear-gradient(to right, #5a5860, #5a5860)',
    color: '#fff'
  },
  isPopupShow: false,
  curNow: 0,
  status: 'loadmore',
  detailData: {} as any, //详情数据
  list: [] as any,
  page: 0,
  checked: true,
  sort_type: 'asc' //asc  desc
})
onLoad((options) => {
  state.id = options.id as string
  state.type = options.type as string
})
onMounted(() => {
  // setTimeout((res) => {
  //   state.st = 'animation:collectRo 25s infinite;'
  // }, 25000)
  getCollectionDetailData()
})
//看作者
const seeAuthor = () => {
  uni.navigateTo({
    url: `/pages/author-details/index?id=${state.detailData.author_id}`
  })
}
//跳转逻辑
const routerPush = (item: any) => {
  if (item.sale_status_text === '首发待抢购') {
    uni.navigateTo({
      url: `/pages/blind-box-details/index?id=${item.collection_id}&type=${0}`
    })
  }
  if (item.sale_status_text === '寄售中') {
    uni.navigateTo({
      url: `/pages/blind-box-details/index?id=${item.id}&type=${2}`
    })
  }
  // if (item.sale_status_text === '首发待抢购') {
  //   state.id = item.id as string
  //   state.type = '0'
  //   getCollectionDetailData()
  // }
  // if (item.sale_status_text === '寄售中') {
  // }
}
const confirm = () => {
  uni.navigateTo({
    url: `/pages/my/certification/index`
  })
}
//支付
const payment = () => {
  if (userInfo.value.is_real == '0') {
    state.show = true
    return
  }
  const promise =
    state.type === '0'
      ? snapUpCollection({ collection_id: state.id })
      : state.type === '1'
      ? snapUpBox({ box_id: state.id })
      : generateOrder({ number_id: state.id })
  promise
    .then((result) => {
      uni.navigateTo({
        url: `/pages/payment/index?type=${state.type}&orderId=${result.data.order_sn}`
      })
    })
    .catch((err) => {
      uni.showToast({
        title: err.data.message,
        icon: 'error'
      })
    })
}
watch(
  () => state.isPopupShow,
  (newValue, oldValue) => {
    if (newValue) {
      bottomOut()
    } else {
      state.status = 'loadmore'
      state.list = []
      state.page = 0
    }
  }
)
//触底加载数据
const bottomOut = () => {
  if (state.status === 'nomore') return
  state.status = 'loading'
  state.page = ++state.page
  console.log(state.checked)

  getOneCollectionAllNumbers({
    page: state.page,
    page_size: 20,
    collection_id: state.id,
    sale_status: state.checked ? '2' : 'all',
    sort_rule: state.curNow === 0 ? 'collection_no' : 'price',
    sort_type: state.sort_type
  }).then((result) => {
    state.list.push(...result.data.data)
    if (result.data.data.length < 20) state.status = 'nomore'
    else state.status = 'loading'
  })
}
//获取详情
const getCollectionDetailData = () => {
  const promise =
    state.type === '0'
      ? getCollectionDetail({ collection_id: state.id })
      : state.type === '1'
      ? getBoxDetail({ box_id: state.id })
      : getNumberDetail({ number_id: state.id })
  promise.then((result) => {
    state.detailData = result.data
  })
}

const checkChange = (bool: any) => {
  state.checked = bool.value
  state.status = 'loadmore'
  state.list = []
  state.page = 0
  bottomOut()
}
const sectionChange = (index: any) => {
  state.curNow = index
  state.status = 'loadmore'
  state.list = []
  state.page = 0
  bottomOut()
}
//复制
const copy = (str: string) => {
  // 不支持复制数字类型所以需要先转为字符串
  const content = typeof str === 'string' ? str : String(str)
  //#ifndef H5
  uni.setClipboardData({
    data: content,
    success: function () {
      console.log('success')
    }
  })
}
const copyText = (node: any) => {
  if (!node) {
    return
  }
  var result
  // 将复制内容添加到临时textarea元素中
  var tempTextarea = document.createElement('textarea')
  document.body.appendChild(tempTextarea)
  if (typeof node == 'object') {
    // 复制节点中内容
    // 是否表单
    if (node.value) {
      tempTextarea.value = node.value
    } else {
      tempTextarea.value = node.innerHTML
    }
  } else {
    // 直接复制文本
    tempTextarea.value = node
  }
  // 判断设备
  var u = navigator.userAgent
  console.log(u.match(/(iPhone|iPod|iPad);?/i))
  if (u.match(/(iPhone|iPod|iPad);?/i)) {
    // iOS
    // 移除已选择的元素
    window.getSelection().removeAllRanges()
    // 创建一个Range对象
    var range = document.createRange()
    // 选中
    range.selectNode(tempTextarea)
    tempTextarea.select()
    // 执行选中元素
    window.getSelection().addRange(range)
    // 复制
    result = document.execCommand('copy')
    // 移除选中元素
    window.getSelection().removeAllRanges()
  } else {
    // 选中
    tempTextarea.select()
    // 复制
    result = document.execCommand('Copy')
  }
  // 移除临时文本域
  document.body.removeChild(tempTextarea)
  if (result) {
    uni.showToast({
      duration: 1000,
      icon: 'none',
      title: '复制成功'
    })
  } else {
    uni.showToast({
      duration: 1000,
      icon: 'none',
      title: '复制失败'
    })
  }

  return result
}
</script>
<style lang="less">
@import '@/static/xuanzhuan.css';

::v-deep(.u-hairline-border) {
  ::after {
    border : none !important;
  }
}
.b-button {
  position : fixed;
  bottom : 0;
  color : #FFFFFF;
  font-size : 40rpx;
  background-color : #231F30;
  width : 100%;
  height : 130rpx;
  display : flex;
  align-items : center;
  justify-content : space-between;
  view {
    margin : 30rpx;
  }
}
.qy-14 {
  width : 686upx;
  margin : 0 auto;
  background-image : linear-gradient(to bottom, #111723, #111723);
  border-radius : 14upx;
  padding-top : 30rpx;
  margin-top : 20rpx;

  .qy-19 {
    padding : 26upx;
    color : #FFFFFF;
    box-sizing : border-box;

    .qy-20 {
      float : left;
      width : 70%;
    }
    .qy-21 {
      background : antiquewhite;
    }
    .qy-22 {
      float : right;
      font-size : 28upx;
      color : #FFFFFF;
      margin-top : 105upx;
    }
  }

  // .qy-18 {
  // 	width: 100%;
  // 	height: 100%;
  // 	position: absolute;

  // 	image {
  // 		width: 100%;
  // 		height: 100% !important;
  // 		z-index: 0;
  // 	}
  // }

  .qy-15 {
    width : 100%;
    left : 0;
    right : 0;
    margin : 0 auto;
    height : 46upx;
    position : relative;

    .qy-16 {
      text-align : center;
      width : 100%;
      line-height : 46upx;
      font-size : 30upx;
      color : #F6BF51;
    }

    .qy-17 {
      position : absolute;
      top : 0;
      left : 0;
      right : 0;
      margin : 0 auto;
      text-align : center;

      image {
        width : 376upx;
        height : 46upx;
        display : block;
        margin : 0 auto;
        text-align : center;
      }
    }
  }
}

.popup-contrnt {
  padding : 20rpx;
  .block {
    margin : 25rpx 0;
    color : black;
    display : flex;
    font-size : 28rpx;
    justify-content : space-between;
    .left {
      display : flex;
      align-items : center;
      .tip {
        margin-left : 60rpx;
        padding : 4rpx;
        background-color : #6CDAF7;
        border-radius : 10rpx;
        color : #FFFFFF;
      }
    }
  }
  .checked {
    display : flex;
    justify-content : space-between;
    align-items : center;
    margin : 20rpx 12rpx;
  }
}
.info-number {
  background-color : #231F30;
  margin : 10rpx 50rpx;
  padding : 30rpx;
  border-radius : 20rpx;
  font-size : 32rpx;
  margin-top : 25rpx;
  .content-b {
    padding : 15rpx;
    margin-top : 15rpx;
  }
  .content {
    padding : 15rpx;
    display : flex;
    justify-content : space-between;
  }
  .top {
    color : #FFFFFF;
  }
  .bottom {
    margin-top : 20rpx;
    display : flex;
    align-items : center;
    color : #777485;
    justify-content : space-between;
    font-size : 28rpx;
    .text {
      overflow : hidden;
      white-space : nowrap;
      text-overflow : ellipsis;
      margin-right : 45rpx;
    }
    image {
      width : 40rpx;
      height : 40rpx;
    }
  }
}
.info {
  background-color : #231F30;
  margin : 10rpx 50rpx;
  padding : 30rpx;
  border-radius : 20rpx;
  display : flex;
  align-items : center;
  justify-content : space-around;

  .left {
    color : #FFFFFF;
    font-size : 32rpx;
    display : flex;
    align-items : center;
    width : 50%;
    text-indent : 21rpx;
    overflow : hidden;
    white-space : nowrap;
    text-overflow : ellipsis;
  }
  .button {
    width : 40%;
  }
}
.qy-1 {
  width : 356px;
  margin : 0 auto;
  overflow : hidden;
  padding-top : 26px;
  .tip {
    display : flex;
    padding-top : 18px;
    font-size : 25rpx;
    .tip-l {
      width : 120rpx;
      height : 40rpx;
      background-image : linear-gradient(to right, #9F56FF, #9F56FF);
      border-radius : 10rpx;
      line-height : 40rpx;
      text-align : center;
      color : #FFFFFF;
    }
    .tip-r {
      display : flex;
      height : 40rpx;
      margin-left : 20rpx;
      width : 220rpx;
      .tip-r-l {
        width : 48%;
        background : #9F56FF;
        line-height : 40rpx;
        text-align : center;
        color : #FFFFFF;
      }
      .tip-r-r {
        flex : 1;
        background : #68637E;
        line-height : 40rpx;
        text-align : center;
        color : #FFFFFF;
      }
    }
  }

  .qy-2 {
    width : 410rpx;
    text-align : center;
    border-radius : 10upx;
    margin-top : 30upx;

    image {
      user-select : none;
      pointer-events : none;
      width : 368rpx;
      height : 368rpx;
    }
  }

  .qy-3 {
    width : 100%;
    text-align : center;
    border-radius : 10rpx;
    overflow : hidden;
    margin-top : 50rpx;

    image {
      user-select : none;
      pointer-events : none;
      width : 502rpx;
      height : 193rpx;
    }
  }
  .qt-1 {
    color : #FFFFFF;
    padding : 0 30rpx;
    font-size : 35rpx;
    display : flex;
    justify-content : space-between;
    .arrow-right {
      font-size : 30rpx;
      color : #AFAFAF;
      width : 200rpx;
    }
  }
  .qy-4 {
    width : 100%;
    display : flex;
    justify-content : space-between;

    .qy-5 {
      width : 120rpx;
      display : block;
      text-align : right;

      image {
        user-select : none;
        pointer-events : none;
        width : 90rpx;
        height : 90rpx;
      }
    }

    .qy-8 {
      width : 120rpx;
      display : block;

      image {
        user-select : none;
        pointer-events : none;
        width : 90rpx;
        height : 90rpx;
      }
    }
  }

  .qy-9 {
    width : 100%;
    display : flex;
    align-items : center;
    justify-content : center;
    color : #999999;
    font-size : 22rpx;
    margin-top : 20rpx;

    image {
      user-select : none;
      pointer-events : none;
      width : 28rpx;
      height : 28rpx;
      margin-right : 10rpx;
    }
  }
}

</style>
